{% extends 'layout_panel.html' %}
{% load static %}

{% block html_js_code %}
<script>
layui.use(function() {
    var util = layui.util;
    var layer = layui.layer;
    var $ = layui.$;
    var form = layui.form;

    function toggleServiceName() {
        if ($('#id_set_service').is(':checked')) {
            $('#service-group').show();
        } else {
            $('#service-group').hide();
        }
    }
    toggleServiceName();
  form.on('switch(set_service)', function(data){
        toggleServiceName();
  });

    util.event('lay-on', {
        checkPort: function() {
            var port = $('#id_port').val();
            var loadIndex = layer.msg('检测端口冲突...', {icon: 16,shade: 0.6, time:0});
            $.ajax({
                url: "{% url 'db_mysql:check_port' %}?port=" + port,
                type: 'get',
                dataType: 'json',
                success: function(data) {
                    layer.close(loadIndex);
                    var confirmIndex = layer.alert(data.message, {title:null},function(index) {
                        layer.close(confirmIndex);
                        $('#id_port').val(data.port);
                    });
                },
                error: function(xhr, status, error) {
                    alert(xhr.responseText);
                }
            })
        },
        checkService: function() {
            var service_name = $('#id_service_name').val();
            if (service_name === '') {
                layer.msg('请输入服务名！', {icon: 5});
            }else{
                var loadIndex = layer.msg('检测服务名冲突...', {icon: 16,shade: 0.6});
                $.ajax({
                    url: "{% url 'db_mysql:check_service' %}?service=" + service_name,
                    type: 'get',
                    dataType: 'json',
                    success: function(data) {
                        layer.close(loadIndex);
                        layer.alert(data.message);
                    },
                    error: function(xhr, status, message) {
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMsg = xhr.responseJSON.message;
                        } else {
                            errorMsg = error;
                        }
                        layer.alert(errorMsg, {title:null})
                    }
                })
            }
        }
    })
})
</script>
{% endblock %}

{% block page_content %}
{% include 'include_messages.html' %}
<form method="post" class="layui-form">{% csrf_token %}
<div class="card">
    <div class="card-body">

            <dl class="row mb-0">
                <dt class="col-sm-2">安装路径</dt>
                <dd class="col-sm-10">{{ install_info.install_dir }}</dd>
                <dt class="col-sm-2">数据存储路径</dt>
                <dd class="col-sm-10">{{ install_info.data_dir }}</dd>
                <dt class="col-sm-2">配置文件路径</dt>
                <dd class="col-sm-10">{{ install_info.conf_file }}</dd>
            </dl>
            <hr/>{{ form.install_id }}
            <div class="form-group row">
              <label class="col-sm-2 col-form-label">{{ form.port.label }}</label>
              <div class="col-sm-3">
                  <div class="input-group">{{ form.port }}
                      <button type="button" class="btn btn-warning border-0 ml-2" lay-on="checkPort">
                          检测端口冲突
                      </button>
                      <span class="text-danger">{{ form.port.errors }}</span>
                  </div>
              </div>
            </div>

            <div class="form-group row">
              <label class="col-sm-2 col-form-label">{{ form.set_service.label }}</label>
              <div class="col-sm-3">
                  <div class="input-group">{{ form.set_service }}</div>
              </div>
            </div>

<div id="service-group">

            <div class="form-group row">
              <label class="col-sm-2 col-form-label">{{ form.service_name.label }}</label>
              <div class="col-sm-4">
                  <div class="input-group">{{ form.service_name }}
                      <button type="button" class="btn btn-warning border-0 ml-2" lay-on="checkService">
                          检测服务名冲突
                      </button>
                  </div>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-2 col-form-label">{{ form.service_auto.label }}</label>
              <div class="col-sm-3">
                  <div class="input-group">{{ form.service_auto }}</div>
              </div>
            </div>
</div>
    </div>
    <div class="card-footer">
    <button type="submit" lay-submit class="btn btn-primary">开始初始化</button>
        <a href="{% url 'db_mysql:index' %}" class="btn btn-secondary float-right">取消</a>
    </div>
</div>
</form>
{% endblock %}